import { Popup,Button,ScrollView } from '../../dist/rnexui';
import React from 'react';
import {findDOMNode} from 'react-dom';

class List extends React.Component {
	list = ['1']
	
	idx = 1
	
	static contextTypes = {
		ScrollView: function(sv){return true},
	};
	
	componentDidMount(){
		setInterval(()=>{
			let len = this.list.length;
			
			if( len < 100 ) {
				this.list.push(this.list[len - 1] +'.'+ this.idx++)
			} else {
				this.list = ['']
			}
			
			this.setState({}, ()=>{
				this.context.ScrollView.refreshScrollBar();	
				this.context.ScrollView.scrollEnd('y');
			})
		}, 300)	
	}
	
	render(){
		return <div>
		start...
		{this.list.map((v, i)=>{
			return <div style={{padding: '2px 5px'}}>{v}</div>	
		})}
		end...
		</div>	
	}	
}

class App extends React.Component {
	
	
	
  render() {
    return (
		<div>
		<div style={{
			width : 300,
			height: 300,
			border: '1px solid #000',
			padding: 5	
		}}>
			<ScrollView enablePreventDefaultOnEnd={false} overflowX="auto" onVScrollStart={()=>console.log('//////////////')} wheelDir='y' style={{}}>
				<List />
			</ScrollView>
		</div>
		<div style={{
			width : 200,
			height: 200	
		}}>
			<ScrollView ref={(o) => window.sview = o} wheelDir='x' overflowY="auto"  onHScrollStart={()=>console.log('//////////////')} onHScrollEnd={()=>console.log('//////////////')} style={{border: '10px solid #000', padding: 10}}>
				<div >
				start...
				<div>123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div>123456789</div>
				<div id="sv">123456789</div>
				end...
				</div>
			</ScrollView>
		</div>
		
		<div style={{
			width : 200,
			height: 200	
		}}>
			<ScrollView wheelDir='y' component="textarea" onHScrollStart={()=>console.log('//////////////')} onHScrollEnd={()=>console.log('//////////////')} style={{border: '1px solid #f2f2f2'}}>
				start...
				end...
				start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...start...end...start...
				end...start...
				end...start...
				end...start...
				end...start...
				end...
			</ScrollView>
		</div>
		
		</div>
    );
  }
}

ReactDOM.render(<App/>, demo);